<!-- 
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2022 APThink David唐 all rights reserved.
 * 版权所有，侵权必究！
 *
 -->
<script setup lang="ts">
import { defineExpose, defineEmits, ref, reactive, onMounted } from 'vue'
import log from 'loglevel'
import { add, upd } from '@/api'
import { Role } from './Role'
import { i18n } from '@/i18n'
import { copyObject } from '@/utils'

defineExpose({
  showDialog,
})

const emits = defineEmits(['addok','updateok'])

const item = reactive<Role>(new Role())
const dialogEditVisible = ref(false)

function showDialog(current: Role){
  copyObject(current, item)
  dialogEditVisible.value = true
}

onMounted(() => {
  log.debug('=>role dialog mounted')
})

function onSubmitClick() {
  if (item.id == null) {
    add('role', item).then((d: any) => {
      emits("addok", d)
      dialogEditVisible.value = false
    })
  } else {
    console.log(item)
    upd('role', item).then((d) => {
      emits("updateok", d)
      dialogEditVisible.value = false
    })
  }
}

</script>

<template>

  <el-dialog v-model="dialogEditVisible" :title="$t('dialog.role')" draggable>
    <el-form>
      <el-form-item :label="$t('label.rolename')" label-width="30%">
        <el-input v-model="item.rolename" autocomplete="off" />
      </el-form-item>
      <el-form-item :label="$t('label.description')" label-width="30%">
        <el-input v-model="item.description" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogEditVisible = false">{{ $t('button.cancel') }}</el-button>
        <el-button type="primary" @click="onSubmitClick">{{ $t('button.submit') }}</el-button>
      </span>
    </template>
  </el-dialog>
<!-- 
  <el-dialog v-model="dialogPermissionVisible" :title="$t('dialog.permission')" draggable>
    <el-table :data="permissions" stripe style="width: 100%" height="350">
      <el-table-column :label="$t('label.menu')" width="150px">
        <template #default="scope">
          {{ $t('menu.' + scope.row.parentmenuuid) + '-' + $t('menu.' + scope.row.menuuid) }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('label.permissions')">
        <template #default="scope">
          <el-checkbox-group v-model="scope.row.permissions">
            <el-checkbox
              v-for="p in scope.row.menupermissions"
              :key="scope.row.menuuid + p"
              :label="$t('permission.' + p)"
              >{{ $t('permission.' + p) }}</el-checkbox
            >
          </el-checkbox-group>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogPermissionVisible = false">{{ $t('button.cancel') }}</el-button>
        <el-button type="primary" @click="onPermissionConfirmClick">{{
          $t('button.confirm')
        }}</el-button>
      </span>
    </template>
  </el-dialog>
   -->
</template>
